<%@ page language="java" import="java.util.*" import="entity.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%user u=((user)session.getAttribute("user")); 
boolean is_edit=(boolean)request.getAttribute("is_edit");
String name=null;
if (u!=null){
	name=u.getUser_name();
}
boolean is_mobile=(boolean)request.getAttribute("is_mobile");
List<hex>hexs=((List<hex>)request.getAttribute("hexs"));
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'home.jsp' starting page</title>
    <meta charset="utf-8"> 
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style2.css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </head>
<body>



<nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #333333;">
  <a class="navbar-brand" href="./home">
    云顶之奕WiKi
  </a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="./hero_guide">英雄图鉴</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./equip_guide">装备图鉴</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./hex_guide">海克斯图鉴</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./trammel_guide">羁绊图鉴</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./all_army">阵容查看</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./my_army">我的阵容</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./edit_army">阵容编辑</a>
      </li>
    </ul>
  </div>
  <%if (name==null){%>
  <div class="col-md-3 text-end">
    <button type="button" onclick="window.location.href='./account_manage/login.jsp'" class="btn btn-outline-light me-2">登录</button>
    <button type="button" onclick="window.location.href='./account_manage/sign.jsp'" class="btn btn-warning">注册</button>
  </div>
  <%}
  else{ %>
  <div class="col-md-3 text-end">
  <a class="nav-link text-light"><%=name %></a>
  <button type="button" onclick="window.location.href='./quit'" class="btn btn-outline-light me-2">退出登录</button>
  </div>
  <%} %>
  
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>
<div class="container-fluid bg-dark navbar-dark" style="margin:0">
<%if (is_mobile==false){%>
<div class="row">
	<div class="col-sm-2"></div>
		<div class="col-sm-8">
			<div class="list-group ">
				<div class="list-group-item bg-dark">
					<div class="row">
						<div class="col-sm-3">
							<div class="d-flex justify-content-center align-items-center h-100">
								<h4 class="text-light">海克斯图片</h4>
							</div>
						</div>
						<div class="col-sm-9">
							<div class="d-flex justify-content-center align-items-center h-100">
								<h4 class="text-light">海克斯描述</h4>	
							</div>
						</div>
					</div>
				</div>	
			</div>
		</div>
</div>
<%}%>
<div class="row mt-3">  
    <div class="col-sm-2"></div>  
    <div class="col-sm-8">  
        <select class="form-select" id="hexLevelSelector">  
            <option value="all">全部等级</option>  
            <option value="一">一级强化符文</option>  
            <option value="二">二级强化符文</option>  
            <option value="三">三级强化符文</option>   
        </select>  
    </div>  
</div>
<%/* 循环 */ 
for (int i=0;i<hexs.size();i++){%>
<div class="row hex-item-row">
	<div class="col-sm-2"></div>
		<div class="col-sm-8">
			<div class="list-group ">
				<div class="list-group-item bg-dark">
					<div class="row">
						<div class="col-sm-3">
							<div class="card" style="background-color:#31313c">
								<img class="card-img-top" src="<%=hexs.get(i).getImg_url() %> " alt="海克斯图片">
								<div class="card-body text-light">
								  <h4 class="card-title"><%=hexs.get(i).getHex_name()%></h4>
								  <p class="card-text level-info"><%=hexs.get(i).get_type()%></p>
								</div>
							</div>
						</div>
						<div class="col-sm-9">
						<div class="d-flex justify-content-center align-items-center h-100">
							<p class="text-white-50 bg-dark">
							<%=hexs.get(i).getHex_description()%>
						</div>
						</div>
					</div>
				</div>	
			</div>
		</div>
	<%if(is_edit){ %>
	<div class="col-sm-2">
		<div class="d-flex justify-content-center align-items-center h-100">
			<button type="button" onclick="window.location.href = './hex_guide_edit?id=<%=hexs.get(i).getHex_id()%>';" class="btn btn-outline-light me-2" >编辑</button>
		</div>
	</div>
	<%} %>
</div>
<%}/* 循环结束 */ %>

<div id="toptop" class="toptop">   <button type="button" onclick="scrollToTop()" class="btn btn-warning" style="position:fixed;
	right:20px;
	bottom:20px;	">回到顶部</div>
<div class="row">
		<div class="col-sm-3"></div>
		<div class="col-sm-6 text-white" style="text-align:center">
  		愿您使用愉快，若发现错误或bug，请添加联系QQ：2208689304
  		</div>
		<div class="col-sm-3"></div>
	</div>
</div>
</div>
</div>
</div>
</body>
<script>
function scrollToTop() {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
}
 
document.getElementById('hexLevelSelector').addEventListener('change', function() {  
	
    var selectedLevel = this.value;  
    var items = document.querySelectorAll('.hex-item-row'); 
    for (var i = 0; i < items.length; i++) {
		
        var levelInfo = items[i].querySelector('.level-info').textContent.trim();  
        // 检查是否匹配选定的等级或"全部等级"  
		
        if (selectedLevel === 'all' || levelInfo.startsWith(selectedLevel + '级')) {  
            items[i].style.display = '';  
        } else {  
            items[i].style.display = 'none';  
        }  
    };  
});  
</script>